
body{
	font-family: Helvetica,Arial,sans-serif;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

#contenedor{
	width: auto;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: transparent;
	overflow: hidden;
}

#contenedor-login{
	width: auto;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
}

#encabezado{
		position:fixed; /*El div será ubicado con relación a la pantalla*/
		left:0px; /*A la derecha deje un espacio de 0px*/
		right:0px; /*A la izquierda deje un espacio de 0px*/
		top:0px; /*Abajo deje un espacio de 0px*/
		height:75px; /*alto del div*/
		z-index:0;
		color: white;
		width: 100%;
		text-align: right;
		margin: 0px 0px 0px 0px;
	    padding: 0px;
	    overflow: hidden;
	}

#notificaciones{
	width: 100%;
	height: 50px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-color: black;
}

#notificaciones p{
	width: 100px;
	height: 50px;
	margin: 10px 0px 0px 0px;
	padding: 0px;
	color:white;
	float: left;
	font-size: 20px;
}

.bloque{
	width: 50px;
	height: 50px;
	float: right;
}

/************************************************************************/

/* cuadro celeste : area de notificacion de usuario para foto y sesion */
#notificacion-usuario{
	background-color: #61A7D0;
	width: 175px;
	height: 50px;
	overflow: hidden;
}

#notificacion-usuario-foto{
	border-radius: 20px;
	width: 43px;
	height: 43px;
	margin-left:5px;
	margin-top: 3px;
	float: left;
	box-shadow: 1px 1px 5px black;
}

#notificacion-usuario-foto img{ /* declaramos que la imagen se invoque al tamaño de la capa*/
	border-radius: 20px;
	width: 43px;
	height: 43px;
}

#notificacion-usuario-datos{
	width: 125px;
	height: 50px;
	margin: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background-color: transparent;
	float: left;
}

#notificacion-usuario-datos-saludo{
	width: 125px;
	height: 25px;
	background-color: transparent;
	margin-top: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#notificacion-usuario-datos-saludo p{
	width: 125px;
	height: 25px;
	color: white;
	font-weight: bold;
	font-size: 13px;
	float: left;
	text-align: center;
	margin-left: 0px;
	margin-top: 5px;
}

#notificacion-usuario-datos-nombre{
	width: 125px;
	height: 25px;
	background-color: transparent;
	margin-top: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#notificacion-usuario-datos-nombre p{
	width: 125px;
	height: 25px;
	color: white;
	font-weight: bold;
	font-size: 11px;
	float: left;
	text-align: center;
	margin-left: 0px;
	margin-top: -2px;
}

/*************************************************************/

/* cuadro verde : area de notificaciones de existencia de solicitudes para peritajes */
#notificacion-peritaje{
	/*background-color: #2D8864;*/
	background: #2D8864 url("../img/icon_17393.svg") no-repeat center center;
	background-size: 28px 28px;
}

#notificacion-peritaje-aviso{
	background-color: #82AF6F;
	border-radius: 20px;
	width: 20px;
	height: 20px;
	margin-left: 26px;
	margin-top: 15px;
}

#notificacion-peritaje-aviso p {
	background-color: transparent;
	color: white;
	width: 20px;
	height: 20px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	margin: 3px 10px 0px 0px;
}

/****************************************************************/

/* cuadro morado : area de para otras notificaciones */

#notificacion-otros{
	/*background-color: #882D64;*/
	background: #882D64 url("../img/icon_8581.svg") no-repeat center center;
	background-size: 32px 32px;
}

#notificacion-otros-aviso{
	background-color: #D15B47;
	border-radius: 20px;
	width: 20px;
	height: 20px;
	margin-left: 26px;
	margin-top: 15px;
}

#notificacion-otros-aviso p {
	background-color: transparent;
	color: white;
	width: 20px;
	height: 20px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	margin: 3px 10px 0px 0px;
}

/******************************************************************/

#titulo{
	width: 100%;
	height: 25px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-color: #428DB8;
}

#cuerpo{

	width: 100%;
	height: auto;
	margin: 75px 0px 0px 0px;
	padding: 0px;
	overflow: hidden;
}

#titulo-login{
	width: 700px;
	height: 100px;
	margin: 50px auto 0px auto;
	padding: 0px 0px -600px 0px;

}

#titulo-login img{
	width: 800px;
	height: 175px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#menu{
	width: 20%;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-color: #F1F1F1;
	float: left;
}

#contenido{
	width: 80%;
	height: 400px;  /* cambiarlo a auto para que cresca con el tamaño de los formularios */
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-color: #FEFEFE;
	float: left;
	overflow: hidden;
}

footer{
	width: 100%;
	height: 50px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-color: black;
	clear: both;
}

.opcion{ /*De las opciones de cada categoria*/
	display: block;
	color: #575757;
}

.opcion:hover{ 
	background-color: #2286ED;
	color: #FFF;
	cursor: pointer;
}

/*Para los formularios de ingreso*/


/**************************************************************************************/
/**************************************************************************************/
/* INICIO DE CODIGO PARA PONER LAS IMAGENES A LOS TABS DEL MENU */
.tabs-todas{
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.tab-grafico{
	background: #87B87F url('../img/grafico3.svg') no-repeat center center;
	background-size:65% 65%;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.tab-grafico:hover{
	background: #87B87F url('../img/grafico3.svg') no-repeat center center;
	background-size:70% 70%;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.tab-buscar{
	background: #6FB3E0 url('../img/buscar.svg') no-repeat center center;
	background-size:40% 40%;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.tab-buscar:hover{
	background: #6FB3E0 url('../img/buscar.svg') no-repeat center center;
	background-size:45% 45%;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.tab-gestion{
	background: #D15B47 url('../img/gestion.svg') no-repeat center center;
	background-size:65% 65%;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.tab-gestion:hover{
	background: #D15B47 url('../img/gestion.svg') no-repeat center center;
	background-size:70% 70%;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

/**************************************************************************************/
/**************************************************************************************/
/*	 CODIGO PARA LOS BLOQUES A CARGAR COMO FORMULARIOS */

#caja{
	width: 97%;
	height:auto;
	border-radius: 10px;
	margin: 5px 20px 10px 10px;
	border-color: #DDDDDD;
	border: 1px; 

}
#caja-menu{
	width: 100%;
	height: 50px;
	background-color: #F5F5F5;

}



/**************************************************************************************/
/**************************************************************************************/

